<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import { message } from 'ant-design-vue';
import moment from "moment"

// 查询
const pageSize = ref(10);
const pageNo = ref(1)
const items = ref([]);
const loading = ref(true);
const confirmLoading = ref(false);
const totalItems = ref(0);
const pagination = computed(() => ({
    total: totalItems.value,
    current: pageNo.value,
    pageSize: pageSize.value
})) 
const queryParams = ref({
    startTime: "",
    endTime: "",
    orderNumber: ""
});
const columns = ref([
{
        title: "返点清单编码",
        dataIndex: "orderNumber",
        key: 'orderNumber'
    },
    {
        title: "返点清单名称",
        dataIndex: "orderName",
        key: 'orderName'
    },
    {
        title: "上传时间",
        dataIndex: "createTime",
        key: 'createTime'
    },
    {
        title: "修改记录",
        dataIndex: "updateTime",
        key: 'updateTime'
    },
    {
        title: "含税金额",
        dataIndex: "taxTotalAmount",
        key: 'taxTotalAmount',
        align: "center"
    },
    {
        title: "返点金额",
        dataIndex: "pointAmount",
        key: 'pointAmount',
        align: "center"
    },
    {
        title: "实返总额",
        dataIndex: "trueAmount",
        key: 'trueAmount',
        align: "center"
    },
    {
        title: "未返总额",
        dataIndex: "unAmount",
        key: 'unAmount',
        align: "center"
    },
    {
        title: "操作人员",
        dataIndex: "username",
        key: 'username',
        align: "center"
    },
    {
        title: "操作",
        dataIndex: "action",
        width: '140px'
    }
])
const columnsAdd = ref([
    {
        title: "商品编码",
        dataIndex: "goodsNumber",
        key: 'goodsNumber'
    },
    {
        title: "商品名",
        dataIndex: "goodsName",
        key: 'goodsName'
    },
    {
        title: "通用名称",
        dataIndex: "commonName",
        key: 'commonName'
    },
    {
        title: "供应商名称",
        dataIndex: "supplierName",
        key: 'supplierName'
    },
    {
        title: "返点率(%)",
        dataIndex: "pointRate",
        key: 'pointRate',
        align: "center"
    },
    {
        title: "税率(%)",
        dataIndex: "taxRate",
        key: 'taxRate',
        align: "center"
    },
    {
        title: "税额(元)",
        dataIndex: "taxAmount",
        key: 'taxAmount',
        align: "center"
    },
    {
        title: "含税均价(元)",
        dataIndex: "taxAveragePrice",
        key: 'taxAveragePrice',
        align: "center"
    },
    {
        title: "含税总额(元)",
        dataIndex: "taxTotalAmount",
        key: 'taxTotalAmount',
        align: "center"
    },
    {
        title: "无税均价(元)",
        dataIndex: "noTaxAveragePrice",
        key: 'noTaxAveragePrice',
        align: "center"
    },
    {
        title: "无税总额(元)",
        dataIndex: "noTaxTotalAmount",
        key: 'noTaxTotalAmount',
        align: "center"
    },
    {
        title: "零售价(元)",
        dataIndex: "retailPrice",
        key: 'retailPrice',
        align: "center"
    },
    {
        title: "购进数量",
        dataIndex: "num",
        key: 'num',
        align: "center"
    },
    {
        title: "结算金额(元)",
        dataIndex: "payAmount",
        key: 'payAmount',
        align: "center"
    },
    {
        title: "返点金额(元)",
        dataIndex: "pointAmount",
        key: 'pointAmount',
        align: "center"
    },
    {
        title: "操作人员",
        dataIndex: "username",
        key: 'username',
        align: "center"
    }
])
const open = ref(false);
const title = ref("");
const formData = ref({});

function loadItems({page, itemsPerPage}) {
    loading.value = true;
    pageNo.value = page
    pageSize.value = itemsPerPage
    axios.post('/MedicineOrderRecord/getMedicineOrderRecordList', {
        page: page,
        pageSize: itemsPerPage,
        orderNumber: queryParams.value.orderNumber,
        startTime: queryParams.value.startTime ? moment(queryParams.value.startTime.$d).format("YYYY-MM-DD HH:mm:ss") : '',
        endTime: queryParams.value.endTime ? moment(queryParams.value.endTime.$d).format("YYYY-MM-DD HH:mm:ss"): ""
    }).then(({data}) => {
        items.value = data.data.records;
        totalItems.value = data.data.total;
        loading.value = false;
    })
}

onMounted(() => {
    loadItems({page: 1, itemsPerPage: pageSize.value});
});

const dialogEnum = {
    update: "编辑",
    create: "新增"
}

const recordList = ref([])
function openData(data) {
    open.value = true
    title.value = data.orderName
    let obj = {
        orderNumber: data.orderNumber,
        recordType: data.recordType,
        recordTime: data.recordTime
    }
    axios.post("/MedicineOrderRecord/getMedicineOrderRecordInfo", obj).then(res => {
        recordList.value = res.data.data
    })
}

function submit() {
    open.value = false;
}

function handleTabChange(pag){
    loadItems({page: pag.current, itemsPerPage: pag.pageSize})
}
</script>

<template>
    <a-spin size="large" :spinning="loading">
        <a-card title="药品返点基础资料管理">
            <a-row style="margin-bottom: 25px;">
                <a-form
                layout="inline"
                :model="queryParams"
                :colon="false">
                    <a-form-item label="返点清单编码">
                        <a-input v-model:value="queryParams.orderNumber" placeholder="返点清单编码"  allow-clear @keyup.enter="loadItems({page: 1, itemsPerPage: pageSize})"></a-input>
                    </a-form-item>
                    <a-form-item label="开始时间">
                        <a-date-picker show-time v-model:value="queryParams.startTime" placeholder="开始时间"></a-date-picker>
                    </a-form-item>
                    <a-form-item label="结束时间">
                        <a-date-picker show-time v-model:value="queryParams.endTime" placeholder="结束时间"></a-date-picker>
                    </a-form-item>
                    <a-from-item>
                        <a-button @click="loadItems({page: 1, itemsPerPage: pageSize})">查询</a-button>
                    </a-from-item>
                </a-form>
            </a-row>
            <a-table
            :dataSource="items"
            :columns="columns"
            :pagination="pagination"
            @change="handleTabChange">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex == 'pointRate'">
                        <span>{{ (record.pointRate).toFixed() }}%</span>
                    </template>
                    <template v-if="column.dataIndex == 'taxRate'">
                        <span>{{ (record.taxRate).toFixed() }}%</span>
                    </template>
                    <tempalte v-if="column.dataIndex == 'status'">
                        <span v-if="record.status">使用中</span>
                        <span v-if="!record.status">未使用</span>
                    </tempalte>
                    <tempalte v-if="column.dataIndex == 'action'">
                        <a @click="openData(record)">查看详情</a>
                    </tempalte>
                </template>
            </a-table>            
        </a-card>

        <a-modal
        v-model:open="open"
        :title="title"
        cancelText="关闭"
        okText="确定"
        width="66%"
        :confirmLoading="confirmLoading"
        @ok="submit">
        <a-table
            :dataSource="recordList"
            :columns="columnsAdd"
            :pagination="false">
            </a-table>
        </a-modal>
    </a-spin>
</template>

<style scoped lang="less">

</style>
